<template>
	<view class="wrap">
		<view class="card_body">
			<block v-if="invoiceList.length > 0">
				<view class="card_cell" v-for="(item, index) in invoiceList" :key="index" @click="goBlack(item)">
					<view class="card_title">
						<view class="titleText hiddenText">
							{{ item.Company }}
						</view>
						<view class="defTag" v-if="index == 0">默认抬头</view>
					</view>
					<view class="card_lit">
						邮箱：{{ item.Email }}
					</view>
					<view class="editBtn" @click.stop="nav_to(`/pages/invoice/editInvoice?mold=1&id=${item.ID}`)">编辑
					</view>
					<view class="defBtn" v-if="index != 0" @click.stop="setDef(item)">设为默认</view>
				</view>
			</block>
			<block v-else>
				<EmptyBox image="https://giftapp.oss-cn-shenzhen.aliyuncs.com/upload/1721977846162417.png"
					text="还没有发票抬头哦~"></EmptyBox>
			</block>

		</view>

		<view style="height: 160rpx;"></view>
		<view class="saveBox">
			<view class="btn addBtn" @click="nav_to(`/pages/invoice/editInvoice?mold=0`)">
				<image src="https://giftapp.oss-cn-shenzhen.aliyuncs.com/upload/17448712473161365.png" mode="widthFix">
				</image>
				添加发票抬头
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			isBuy: '0',
			invoiceList: [],
		};
	},
	onLoad(e) {
		this.isBuy = e?.isBuy || '0'
		this.getInvoiceList()
	},
	onShow() {
		this.getInvoiceList()

	},
	methods: {
		async getInvoiceList() {
			const that = this
			const res = await that.$api.post('/Invoice/MyInvoiceCompany');
			const { code, data } = res

			if (code == 0) {
				that.invoiceList = data
			}
		},
		async setDef(e) {
			const that = this
			const res = await that.$api.post('/Invoice/SetDefault', { ID: e.ID });
			const { code, data } = res

			if (code == 0) {
				that.$pv.msg('设置成功')
				that.getInvoiceList()
			}
		},
		async goBlack(e) {
			if (this.isBuy == '1') {
				const that = this
				const res = await that.$api.post('/Invoice/SetDefault', { ID: e.ID });
				const { code, data } = res

				if (code == 0) {
					that.$pv.msg('选择成功')
					that.getInvoiceList()
					setTimeout(() => {
						uni.navigateBack();
					}, 700);
				}
			}
		}
	},
}
</script>

<style lang="scss">
page {
	background-color: #f6f6f6;
}

.wrap {
	padding: 24rpx;
	background-color: #fff;

	.card_body {
		.card_cell {
			width: 100%;
			padding: 20rpx;
			border-bottom: 2rpx solid #eee;
			position: relative;

			&:first-child {
				border-top: 2rpx solid #eee;
			}

			.card_title {
				width: calc(100% - 110rpx);

				display: flex;
				align-items: center;

				.titleText {
					max-width: calc(100% - 110rpx);
					color: #111;
					font-size: 28rpx;
					font-weight: bold;
				}

				.defTag {
					padding: 4rpx 8rpx;
					font-size: 18rpx;
					font-weight: bold;
					color: #FFAD26;
					border: 2rpx solid #FFAD26;
					border-radius: 8rpx;
					margin-left: 10rpx;
				}
			}

			.card_lit {
				font-size: 24rpx;
				color: #999;
				margin-top: 10rpx;
			}

			.editBtn {
				position: absolute;
				right: 0;
				top: 16rpx;
				font-size: 24rpx;
				color: #333333;
				width: 96rpx;
				height: 48rpx;
				background: #f6f6f6;
				border-radius: 24rpx;
				display: flex;
				justify-content: center;
				align-items: center;
			}

			.defBtn {
				position: absolute;
				right: 0;
				top: 66rpx;
				font-size: 24rpx;
				color: #333333;
				width: 116rpx;
				height: 48rpx;
				// background: #f6f6f6;
				border-radius: 24rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				color: #FFAD26;
				border: 2rpx solid #FFAD26;
			}
		}
	}
}

.saveBox {
	position: fixed;
	width: 100%;
	height: 158rpx;
	box-sizing: border-box;
	left: 0;
	bottom: 0;
	padding: 20rpx;
	background-color: #fff;
	display: flex;
	justify-content: space-evenly;

	.addBtn {
		flex: 1;
		height: 88rpx;
		border-radius: 44rpx;
		border: 2rpx solid #5d8bf8;
		background-color: #fff;
		color: #5d8bf8;
		font-size: 32rpx;
		font-weight: 500;
		display: flex;
		align-items: center;
		justify-content: center;

		image {
			width: 32rpx;
			height: 32rpx;
			margin-right: 8rpx;
		}
	}

	.confirmBtn {
		margin-left: 24rpx;
		flex: 1;
		height: 88rpx;
		border-radius: 44rpx;
		border: none;
		background: linear-gradient(98deg, #a6c8ff 0%, #5d8bf8 100%);
		font-weight: bold;
		font-size: 32rpx;
		color: #ffffff;
		display: flex;
		align-items: center;
		justify-content: center;
	}
}

.btn {
	letter-spacing: 1px;
}
</style>
